<!doctype html>
<html>
<head design-width="750">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>个人中心</title>
<!-- <link rel="stylesheet" href="css/style.css" /> -->
<link rel="stylesheet" href="./assets/js/axios.js">

<script src="static/js/auto-size.js"></script><!--设置字体大小-->

<script src="static/js/jquery-2.2.4.min.js"></script><!--设置字体大小-->
<script>
	$('#reg').on('click',()=>{
		$.ajax({
			type:'POST',
			url:'http://localhost:3000/api/reg',
			success:res => {
				if(res.err){
					console.log(res.err)
				}else{
					set
				}
			}
		})
	})
	
</script>
<style type="text/css">
	body,p,h1,h2,h3,h4,h5,li,span,i,ul,img,a,strong,input,button,textarea,select,dl,dd,dt{margin:0;padding:0;}
	body{font-family:"microsoft yahei","Arial";font-size: 0.24rem;line-height: 1;color:#333;-webkit-user-select:none;-webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;}
	::-webkit-scrollbar{width: 0;height: 0;}/*滚动条宽高设为0*/
	*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
	[class|="ico"]{-webkit-background-size: 100% 100%;background-size: 100% 100%;display: inline-block;vertical-align: middle;}
	[class|="icon-"]{font-family:"iconfont" !important;font-size:.24rem !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
	li{list-style-type:none; float:left;}
	a{text-decoration:none;color: #333;}
	img{border:none;vertical-align: middle;margin-top: 0;}
	i,var,em{font-style:normal;}
	button{font-family:"microsoft yahei","Arial";outline:none;cursor: pointer;font-size: 0.24rem;border: none;}
	iframe{border: none;}
	input,select,textarea{outline:none;font-family:"microsoft yahei","Arial";font-size: 0.24rem;border-radius: 0;}
	input:disabled{opacity: 1;color:#333;}
	input[type="submit"],input[type="reset"],input[type="text"],input[type="password"],input[type="number"],input[type="button"],button,input[type="date"],textarea{-webkit-appearance: none;border: none;background: none;}
	textarea{resize:none;}
	div{margin:0 auto;}
	.fl{float:left;}
	.fr{float:right;}
	.dt{display: table;width: 100%;}
	.fl-w{float: left;width: 100%;}
	.clear{clear:both;}
	.fixed{z-index: 2;position: fixed;left: 0;bottom: 0;width: 100%;}
	.poa{z-index: 1;position: absolute;left: 0;bottom: 0;width: 100%;}
	.bgsz{-webkit-background-size: 100% 100%;background-size: 100% 100%;}
	.hide{display:none !important;}
	.bdn>:last-child{border-bottom: none;}
	
	.mobile-wrap{position: relative;background-color: #f5f5f5;margin-bottom: 1.3rem;}
	
	header{
		/*背景色渐变*/
		background: linear-gradient(to bottom right, #e51a14, #e51a14);
		width: 100%;
		height: 2.6em;
		/* background-color: #e51a14; */
		margin-bottom: 2.5em;
	}
	header p{
		line-height: 2em;
		color: #FFFFFF;
		margin-left: .2rem;
		font-size: .3rem;
		margin: auto;
		text-align: center;
	}
	main{
		width: 100%;
		display: table;
	}
	
	.mobile-wrap-mb{
		margin-bottom: 0;
		background-color: #fff;
	}
	
	.inform{
		width: 100%;
		display: table;
	}
	.inform h3{
		text-align: center;
		font-size: .46rem;
		color: #323233;
		font-weight: normal;
	}
	
	.inform-list{
		width: 100%;
		display: table;
	}
	.inform-list ul{
		width: 100%;
		height: .66rem;
		border-bottom: .05rem solid #d7d7dc;
		margin-top: .45rem;
	}
	.inform-list ul li{
		width: 33.33%;
		height: .66rem;
		text-align: center;
		line-height: .66rem;
		font-size: .3rem;
		position: relative;
		border-bottom: .05rem solid #d7d7dc;
	}
	.inform-list ul li:after{
		content: '';
		position: absolute;
		right: 0;
		bottom: -.05rem;
		width: .03rem;
		height: .05rem;
		background-color: #fff;
		z-index: 99;
	}
	.inform-list ul li:nth-last-child:after{
		border: none;
	}
	.inform-list ul li.acti{
		border-bottom: .05rem solid #f7505c;
		height: .66rem;
		color: #f7505c;
	}
	
	.inform-text{
		width: 100%;
		display: table;
		display: none;
	}
	
	.inform .show{
		display: table;
	}
	.inform-text p{
		width: 5.96rem;
		height: .82rem;
		border: .01rem solid #d7d7dc;
		margin: 0 auto;
		margin-top: .45rem;
	}
	.inform-text p span{
		display: block;
		width: 1.3rem;
		height: 100%;
		float: left;
		line-height: .82rem;
		margin-left: .2rem;
		color: #afaeb3;
		font-size: .26rem;
	}
	.inform-text p input{
		width: 3rem;
		height: .5rem;
		line-height: .5rem;
		border: none;
		background: none;
		margin-top: .16rem;
		color: #333;
		font-size: .26rem;
	}
	.inform-text h4{
		text-align: center;
		width: 100%;
		width: 5.96rem;
		margin: 0 auto;
		display: table;
	}
	.inform-text h4 input{
		width: 5.96rem;
		height: .82rem;
		border: none;
		background-color: #e51a14;
		color: #fff;
		margin: 0 auto;
		margin-top: 1rem;
		border-radius: .03rem;
		font-size: .28rem;
	}
	.inform-text h4 a{
		color: #afaeb3;
		font-size: .28rem;
		font-weight: normal;
		text-align: right;
		float: right;
		line-height: .5rem;
		font-size: .24rem;
	}
	.return{
		margin: auto;
	}
	

</style>

</head>
<body>
	
	<div class="mobile-wrap center mobile-wrap-mb">
        
        <header>
			<p class="return">
        		个人中心
        	</p>
        </header>
        <main>
        	<div class="inform">
        		<h3>个人信息</h3>
        		<div class="inform-list">
        			<ul>
        				<li class="acti">注册</li>
        				<li>修改资料</li>
        				<li>修改密码</li>
        			</ul>
        		</div>
        		<div class="inform-text show">
        		<form>
					<p>
        				<span>
        					请输入昵称
        				</span>
        				<input type="text" id='username'>
        			</p>
        			<p>
        				<span>
        					请输入密码
        				</span>
        				<input type="text" id='password'>
        			</p>
        			<!-- <p>
        				<span>
        					微信号
        				</span>
        				<input type="text" />
        			</p> -->
        			<h4>
        				<input type="submit" name="" id="reg" value="注册">
        				<!-- <a href="#">遇到问题？</a> -->
        			</h4>
				</form>
        			
        		</div>
        		<div class="inform-text">
        			<p>
        				<span>
        					乡镇 ：
        				</span>
        				<input type="text" />
        			</p>
        			<p>
        				<span>
        					村
        				</span>
        				<input type="text" />
        			</p>
        			<p>
        				<span>
        					村电话
        				</span>
        				<input type="text" />
        			</p>
        			<p>
        				<span>
        					微信号
        				</span>
        				<input type="text" />
        			</p>
        			<p>
        				<span>
        					村长
        				</span>
        				<input type="text" />
        			</p>
        			<h4>
        				<input type="submit" name="" id="" value="确定修改" />
        				<a href="#">备注</a>
        			</h4>
        		</div>
        		<div class="inform-text">
        			<p>
        				<span>
        					新密码 ：
        				</span>
        				<input type="text" />
        			</p>
        			<p>
        				<span>
        					再次输入：
        				</span>
        				<input type="text" />
        			</p>
        			
        			
        			
        			<h4>
        				<input type="button" name="" id="" value="确定修改" />
        				<!-- <a href="#">遇到问题？</a> -->
        			</h4>
        		</div>
        	</div>
        </main>                       
		

   </div><!--mobile_wrap-->
   
   
   
   <div id="menu" class="menu">
   	<div id="one" class="subMenu text-center" data-src="shouye.html"><a href="index.html">
   			<img class="menu_img" src="static/img/hm.svg">
   			<div class="menu_name"><span>首页</span></div>
   		</a>
   	</div>
   	<div id="two" class="subMenu text-center" data-src="liebiao.html">
   		<!-- <img class="menu_img" src="static/img/qz.svg"> -->
   		<a href="shequ.html">
   		<img class="menu_img" src="static/img/qz.svg">
   
   		<div class="menu_name"><span style="color: blacks;">新闻</span></div>
   		</a>
   	</div>
   	<style type="text/css">
		.menu {
			display: block;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 4.5em !important;
			color: #474747;
			padding-top: 10px;
			padding-left: 0em;
			border-top: 1px solid #eee;
			background-color: #fff;
			font-size: 0.99em !important;
			/* padding-bottom: 0.2em;
			margin-left: 0.1em; */
			
		}
		
		.subMenu {
			width: 20.5%;
			float: left;
			cursor: pointer;
			/* margin-left: -0.1em; */
			
		}
		
		.menu_name {
			height: 1.5em;
			width: 100%;
			/* line-height: 1.3em; */
			font-size: 0.9em;
		}
		
		img.menu_img {
			height: 24px;
			width: 24px;
		}
		
		img {
			vertical-align: middle;
			border: 0;
		}
		
		.text-center {
			text-align: center
		}
   		#three {
   			width: 4em;
   			height: 4em;
   			background-color: #FFFFFF;
   			/* position: fixed;
   			bottom: 2em !important; */
   		}
   
   		#three_2 {
   			width: 4.2em;
   			height: 4.2em;
   
   			position: fixed;
   			bottom: 1.8em !important;
   			margin-left: 40.6%;
   			border-radius: 2em;
   		}
   
   		#three_2>img {
   			width: 4.2em;
   			height: 4.2em;
   		}
   	</style>
	
   	<div id="three" class="subMenu text-center" data-src="fabu.html">
   		<img class="menu_img" src="static/img/addbai.svg">
   		<div class="menu_name">发布 </div>
   	</div>
   	<div id="three_2" class="subMenu text-center" data-src="fabu.html">
   		<img class="menu_img" src="static/img/add.svg">
   		<!-- <div class="menu_name">发布 </div> -->
   	</div>
   	<div id="four" class="subMenu text-center" data-src="qz.html">
   		<a href="xinxi.html">
   			<img class="menu_img" src="static/img/sy.svg">
   			<!-- <img class="menu_img" src="static/img/info_2.svg"> -->
   			<div class="menu_name"><span>信息</span></div>
   		</a>
   	</div>
   	<div id="five" class="subMenu text-center" data-src="wd.html">
   		<!-- <img class="menu_img" src="static/img/my.svg"> -->
   		 <img class="menu_img" src="static/img/my_2.svg">
   		<div class="menu_name"  style="color: #ef8329;">我的</div>
   
   	</div>
   </div>
</body>

<script type="text/javascript">
	$('.inform-list ul li').click(function(){
		var n=$(this).index();
		$(this).addClass('acti').siblings().removeClass('acti');
		$('.inform-text').fadeOut();
		$('.inform-text').eq(n).fadeIn();
	})
</script>
</html>
